/**
 * 一个奇葩的瀑布流组件
 * 组件暂时只支持双列流
 */
Component({
  properties: {
    // 整体宽度，单位rpx
    containerWidth: {
      type: Number,
      value: 750
    },
    // 流间距
    gapWidth: {
      type: Number,
      value: 10
    },
    // 数据
    items: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal) {
        console.info("监听数据");
        console.info("新数据");
        console.info(newVal);
        console.info("旧数据");
        console.info(oldVal);
        this._readyData = this._readyData.concat(newVal.slice(oldVal.length, newVal.length));
        console.info("_readyData");
        console.info(this._readyData);
        this.setData({
          itemArray : [[],[]]
        })
        // 仅在追加时或数据异步时执行这个render
        if (oldVal.length > 0 || this._isReadyRender) {
          this._render();
        }
      }
    }
  },

  data: {
    // 流数（当前只支持两条流）
    fallNum: 2,
    // 分流后数据 (里面分别是左右两个流数据集合)
    itemArray: []
  },

  created () {
    // 待渲染数据
    this._readyData = [];
    // 当前激活流(左 : 0    右 : 1)
    this._activeFall = 0;
  },

  attached () {
    /**
     * 数据初始化
     */
    this.setData({
      itemArray: Array(this.data.fallNum).fill().map(() => [])
    });
  },

  ready () {
    // 首次渲染数据
    this._render();
    // 主要用于处理异步数据
    this._isReadyRender = true;
    // 添加监听器（需要写在ready里，否则基础库2.7.1（含）以下不生效）
    // https://developers.weixin.qq.com/community/develop/doc/000e20e79ecf789290399941a51000
    this._addOberver();
  },

  detached () {
    for (const o of this._obervers) {
      o.disconnect();
    }
  },

  methods: {
    /**
     * 添加触达监听
     */
    _addOberver () {
      // 存储监听器
      this._obervers = [];
      // 首排标识
      let flag = 1;
      for (let i = 0; i < this.data.fallNum; i++) {
        const o = this.createIntersectionObserver();
        o.relativeTo('.f-detector').observe(`.f-l${i}`, res => {

          // 判断渲染流
          if (flag < this.data.fallNum) {
            this._activeFall++;
            this._render();
            flag++;
          } else if (res.intersectionRatio === 0) {
            this._activeFall = i;
            this._render();
          } else {
            this._activeFall = 0;
          }

        });
        this._obervers.push(o)
      }
    },

    /**
     * 数据分流渲染
     */
    _render () {
      console.info("render");
      console.info(this._readyData.length);
      console.info(this._readyData);
      console.info(this.data.itemArray);    
      if (this._readyData.length > 0) {
        const i = this.data.itemArray[this._activeFall].length;
        this.setData({
          [`itemArray[${this._activeFall}][${i}]`]: this._readyData.shift()
        }, () => {
          // 超时处理
          clearTimeout(this._renderTimeout);
          this._renderTimeout = setTimeout(() => {
            this._render();
          }, 100);
        });
      }
    }
  }
});
